<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习Jquery</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script>
        $(document).ready(function () {


            //状态
            $("#toggle1").click(function () {
                $("#toggle2").toggle();
            });
            $("#toggle2").click(function () {
                $("#toggle1").hide();
            });
            var fadeIn1 = $("#fadeIn1");
            var fadeIn2 = $("#fadeIn2");
            var fadeIn3 = $("#fadeIn3");
            $("#fadeInBtn").click(function () {
                if (fadeIn1.is(":hidden")) {
                    fadeIn1.fadeIn();
                    fadeIn2.fadeIn("slow");
                    fadeIn3.fadeIn(1000);
                } else {
                    fadeIn3.fadeOut();
                    fadeIn2.fadeOut("slow");
                    fadeIn1.fadeOut(1000);
                }
            });
            $("#fadeToggle").click(function () {
                $("#fadeToggle1").fadeToggle(1000);
            });
            $("#fadeTo").click(function () {
                $("#fadeTo1").fadeTo(1000, 0.5);
            });
            $("#slideUpBtn").click(function () {
                var slideUp1 = $("#slideUp1");
                if (slideUp1.is(":hidden")) {
                    slideUp1.slideDown();
                } else {
                    slideUp1.slideUp();
                }
            });

            //事件
//            $("#dianjishijian1").click(function () {
//                alert(this.innerHTML);
//            });
//            $("#dianjishijian2").dblclick(function () {
//                alert(this.innerHTML);
//            });
//            $("#dianjishijian3").mouseenter(function () {
//                alert(this.innerHTML);
//            });
//            $("#dianjishijian4").mouseleave(function () {
//                alert(this.innerHTML);
//            });
//            $("#dianjishijian5").mousedown(function () {
//                alert(this.innerHTML);
//            });
//            $("#dianjishijian6").mouseup(function () {
//                alert(this.innerHTML);
//            });
//            $("#dianjishijian7").hover(function () {
//                alert("穿过事件");
//            }, function () {
//                alert("离开事件");
//            });
//            $("#dianjishijian8").focus(function () {
//                alert(this.innerHTML);
//            });
//            $("#dianjishijian9").blur(function () {
//                alert(this.innerHTML);
//            });

            //选择器
            $("#xuanzeqi1").css("color", "green");
            $(".xuanzeqi2").css("color", "red");
            $("xuanzeqi").css("color", "blue");

            //动画
            $("#animateBtn1").click(function () {
                $("#animate1").animate({
                    left: "200px",
                    width: "100px",
                    height: "100px"
                }, 1000);
            });
            $("#animateBtn2").click(function () {
                $("#animate2").animate({
                    width: "+=50px",
                    height: "+=50px"
                });
            });
            $("#animateBtn3").click(function () {
                var animate3 = $("#animate3");
                animate3.animate({width: "100px", opacity: 0.7}, 500);
                animate3.animate({height: "100px", opacity: 0.5}, 500);
                animate3.animate({height: "50px", opacity: 0.7}, 500);
                animate3.animate({width: "50px", opacity: 1}, 500);
            });
            var animate3Flag = false;
            $("#animateBtn4").click(function () {
                var animate3 = $("#animate3");
                if (animate3Flag) {
                    animate3.stop();
                    animate3Flag = false;
                } else {
                    animate3Flag = true;
                    animate3.height("50px");
                    animate3.width("50px");
                    animate3.animate({
                        width: "200px", height: "200px"
                    }, 5000, function () {
                        animate3Flag = false;
                    })
                }
            });

            //html相关
            var html1 = $("#html1 p");
            $("#html1_1").click(function () {
                alert(html1.text());
            });
            $("#html1_2").click(function () {
                alert(html1.html());
            });
            $("#html1_4").click(function () {
                alert($("#html1_edit").val());
            });
            $("#html1_3").click(function () {
                var text = html1.text();
                html1.text(text + "0");
            });
            $("#html1_5").click(function () {
                alert("type类型为\n" + $("#html1_edit").attr("type"));
            });
            $("#html1_6").click(function () {
                html1.html(function (i, origText) {
                    return origText + "<b>容</b>";
                })
            });
            $("#html1_7").click(function () {
                var edit = $("#html1_edit");
                edit.attr("value", function (i, origValue) {
                    return origValue + "容";
                })
            });

            var html2_1 = $("#html2_1");
            var html2Index = 0;
            $("#html2Btn1").click(function () {
                html2_1.append("<li>内容" + ++html2Index + "</li>");
            });
            $("#html2Btn2").click(function () {
                html2_1.prepend("<li>内容" + ++html2Index + "</li>");
            });
            $("#html2Btn3").click(function () {
                var text1 = "<li>内容" + ++html2Index + "</li>";
                var text2 = $("<li></li>").text("内容" + ++html2Index);
                var text3 = document.createElement("li");
                text3.innerHTML = "内容" + ++html2Index;
                html2_1.append(text1, text2, text3);
            });
            $("#html2Btn4").click(function () {
                $("#html2_1_1").before("<li>内容" + ++html2Index + "</li>");
            });
            $("#html2Btn5").click(function () {
                $("#html2_1_1").after("<li>内容" + ++html2Index + "</li>");
            });
            $("#html2Btn6").click(function () {
                $("#html2_1_1").remove();
            });
            $("#html2Btn7").click(function () {
                html2_1.empty();
            });

            var html3_1 = $("#html3_1");
            $("#html3btn1").click(function () {
                $("h1,h2,p").addClass("blue");
            });
            $("#html3btn2").click(function () {
                html3_1.removeClass("blue");
            });
            $("#html3btn3").click(function () {
                html3_1.toggleClass("blue");
            });

            var html4_1 = $("#html4_1");
            $("#html4Btn1").click(function () {
                alert("color属性值为：" + html4_1.css("color"));
            });
            $("#html4Btn2").click(function () {
                html4_1.css("font-size", "24px");
            });
            $("#html4Btn3").click(function () {
                html4_1.css({"font-size": "10px", "color": "red"});
            });

            $("#html5Btn1").click(function () {
                var element = $("#html5_1");
                var text = "";
                text += "width = " + element.width() + "\n";
                text += "height = " + element.height() + "\n";
                text += "innerWidth = " + element.innerWidth() + "\n";
                text += "innerHeight = " + element.innerHeight() + "\n";
                text += "outerWidth = " + element.outerWidth() + "\n";
                text += "outerHeight = " + element.outerHeight() + "\n";
                alert(text);
            });

            $("#travBtn1").click(function () {
                $("#trav_child").parent().css({"color": "green"});
            });
            $("#travBtn2").click(function () {
                $("#trav_child").parents("ul").css({"color": "green"});
            });
            $("#travBtn3").click(function () {
                $("#trav_child").parentsUntil("div").css({"color": "green"});
            });
            $("#travBtn4").click(function () {
                $("#trav_parent").children().css({"color": "green"});
            });
            $("#travBtn5").click(function () {
                $("#trav_parent").find("ul").css({"color": "green"});
            });
            $("#travBtn6").click(function () {
                $("#trav_child").siblings().css({"color": "green"});
            });
            $("#travBtn7").click(function () {
                $("#trav_child").next().css({"color": "green"});
            });
            $("#travBtn8").click(function () {
                $("#trav_child").nextAll().css({"color": "green"});
            });
            $("#travBtn9").click(function () {
                $("#trav_child").nextUntil("p").css({"color": "green"});
            });
            $("#travBtn10").click(function () {
                $("#trav_child").siblings().first().css({"color": "green"});
            });
            $("#travBtn11").click(function () {
                $("#trav_child").siblings().last().css({"color": "green"});
            });
            $("#travBtn12").click(function () {
                $("#trav_child").siblings().eq(1).css({"color": "green"});
            });
            $("#travBtn13").click(function () {
                $("#trav_child").siblings().filter(".blue").css({"color": "green"});
            });
            $("#travBtn14").click(function () {
                $("#trav_child").siblings().not(".blue").css({"color": "green"});
            });
        });
    </script>

    <style>
        span {
            background-color: #DDDDDD;
        }

        #slideUp1 {
            padding: 50px;
            background-color: #DDDDDD;
            text-align: center;
        }

        .blue {
            color: blue;
        }
    </style>
</head>
<body>
<div id="xuanzeqi">
    <h2>选择器</h2>
    <p id="xuanzeqi1">id选择器</p>
    <p class="xuanzeqi2">类选择器</p>
    <xuanzeqi>元素选择器</xuanzeqi>
</div>
<div>
    <h2>事件</h2>
    <div id="shijian">
        <p><span id="dianjishijian1">单击事件</span></p>
        <p><span id="dianjishijian2">双击事件</span></p>
        <p><span id="dianjishijian3">指针穿过事件</span></p>
        <p><span id="dianjishijian4">指针离开事件</span></p>
        <p><span id="dianjishijian5">在元素上面并按下鼠标事件</span></p>
        <p><span id="dianjishijian6">在元素上面并松开鼠标事件</span></p>
        <p><span id="dianjishijian7">hover事件(穿过和离开事件)</span></p>
        <p><span id="dianjishijian8">获取焦点事件</span></p>
        <p><span id="dianjishijian9">失去焦点事件</span></p>
    </div>
</div>
<div>
    <h2>效果</h2>
    <p id="toggle">
        <span id="toggle1" style="background-color: gainsboro">点击显示/隐藏</span>
        <span id="toggle2" style="background-color: grey">点击显示/隐藏</span>
    </p>
    <p id="fadeIn">
        <input value="点击淡入淡出" id="fadeInBtn" type="button">
        <span id="fadeIn1">内容 1</span>
        <span id="fadeIn2">内容 2</span>
        <span id="fadeIn3">内容 3</span>
    </p>
    <p id="fadeToggle">
        <input value="点击淡入淡出" id="fadeToggleBtn" type="button">
        <span id="fadeToggle1">内容 1</span>
    </p>
    <p id="fadeTo">
        <input value="淡入到给定的透明度" id="fadeToBtn" type="button">
        <span id="fadeTo1">内容 1</span>
    </p>
    <div>
        <input value="切换滑动状态" id="slideUpBtn" type="button">
        <div id="slideUp1">
            内容
        </div>
    </div>
    <div>
        <div>
            <P><input value="点击滑动" id="animateBtn1" type="button"></P>
            <div style="background:#98bf21;height:50px;width:50px;position: relative" id="animate1"></div>
        </div>
        <div>
            <P><input value="点击放大" id="animateBtn2" type="button"></P>
            <div style="background:#98bf21;height:50px;width:50px;position: relative;" id="animate2">
            </div>
        </div>
        <div>
            <P>
                <input value="点击开始动画" id="animateBtn3" type="button">
                <input value="点击开始或结束动画" id="animateBtn4" type="button">
            </P>
            <div style="background:#98bf21;height:50px;width:50px;position: relative;" id="animate3">
            </div>
        </div>
    </div>
</div>
<div>
    <h2>html</h2>
    <div id="html1">
        <ul>
            <li>text() - 设置或返回所选元素的文本内容</li>
            <li>html() - 设置或返回所选元素的内容（包括 HTML 标记）</li>
            <li>val() - 设置或返回表单字段的值</li>
            <li>attr() - 获取属性</li>
        </ul>
        <p>内<b>容</b> <input id="html1_edit" type="text" value="默认值"></p>
        <input value="获取文本" id="html1_1" type="button">
        <input value="获取元素" id="html1_2" type="button">
        <input value="获取元素表单字段的值" id="html1_4" type="button">
        <input value="设置内容" id="html1_3" type="button">
        <input value="获取属性" id="html1_5" type="button">
        <input value="设置html(后面增加粗体内容)" id="html1_6" type="button">
        <input value="设置属性值" id="html1_7" type="button">
    </div>
    <div id="html2">
        <p>
            <input value="append 结尾添加" id="html2Btn1" type="button">
            <input value="prepend 开头添加" id="html2Btn2" type="button">
            <input value="同时添加多条" id="html2Btn3" type="button">
            <input value="第二条前面添加" id="html2Btn4" type="button">
            <input value="第二条后面添加" id="html2Btn5" type="button">
            <input value="删除第二条" id="html2Btn6" type="button">
            <input value="清空子元素" id="html2Btn7" type="button">
        </p>
        <ul id="html2_1">
            <li>第一条</li>
            <li id="html2_1_1">第二条</li>
            <li>第三条</li>
        </ul>
    </div>
    <div id="html3">
        <p>
            <b>有点异常</b>
            <input value="添加css类" id="html3Btn1" type="button">
            <input value="删除css类" id="html3Btn2" type="button">
            <input value="添加或删除css类" id="html3Btn3" type="button">
        </p>
        <p class="blue" id="html3_1">CSS类的颜色为蓝色</p>
    </div>

    <div id="html4">
        <p>
            <input value="获取CSS属性" id="html4Btn1" type="button">
            <input value="设置CSS属性(放大字体)" id="html4Btn2" type="button">
            <input value="批量设置属性" id="html4Btn3" type="button">
        </p>
        <p style="color: blue;font-size: 12px" id="html4_1">CSS属性设置和获取</p>
    </div>

    <div id="html5">
        <p>
            <input value="获取宽高属性" id="html5Btn1" type="button">
        </p>
        <p style="padding: 10px 15px;margin: 10px 15px;border: 2px grey solid;" id="html5_1">CSS属性设置和获取</p>
    </div>
</div>
<!--遍历-->
<div id="trav">
    <div>
        <p>
            <input value="设置父元素为绿色" id="travBtn1" type="button">
            <input value="设置所有的都是绿色" id="travBtn2" type="button">
            <input value="设置所有的都是绿色" id="travBtn3" type="button">
            <input value="顶部表所有子元素设置为绿色" id="travBtn4" type="button">
            <input value="设置所有子元素ul为绿色" id="travBtn5" type="button">
            <input value="设置同胞元素为绿色" id="travBtn6" type="button">
            <input value="设置下一个同胞元素为绿色" id="travBtn7" type="button">
            <input value="设置后面所有同胞元素为绿色" id="travBtn8" type="button">
            <input value="设置后面所有同胞元素知道标题位置为绿色" id="travBtn9" type="button">
            <input value="设置第一个同胞元素为绿色" id="travBtn10" type="button">
            <input value="设置最后一个同胞元素为绿色" id="travBtn11" type="button">
            <input value="设置第二个同胞元素为绿色" id="travBtn12" type="button">
            <input value="设置蓝色的那个同胞元素为绿色" id="travBtn13" type="button">
            <input value="设置除了蓝色外的所有同胞元素为绿色" id="travBtn14" type="button">
        </p>
        <p>
            <ul id="trav_parent" style="color: red">
                <li>第一层1</li>
                <li>第一层2
                    <ul style="color: darkred">
                        <li>第二层1</li>
                        <li>第二层2
                            <ul style="color: darksalmon">
                                <li>第三层1</li>
                                <li>第三层2</li>
                                <li id="trav_child"><b>第三层3</b></li>
                                <li class="blue">第三层4</li>
                                <li>第三层5</li>
        <p>这是标题</p>
        <li>第三层6</li>
        </ul>
        </li>
        <li>第二层3</li>
        </ul>
        </li>
        <li>第一层3</li>
        </ul>
    </div>
</div>

<div>
    释放美元符号的控制
    <p> $.noConflict(); </p>
    释放并自定义简写
    <p> var jq = $.noConflict(); </p>
</div>

</body>
</html>